<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const echarts = inject('echarts');
const props = defineProps({
  boxplotData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

const echartDom = ref(null);
const myChart = shallowRef(null);

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          // params 是包含数据信息的对象
          return (
            params[0].name + '<br/>' +
            '最小值: ' + params[0].data[0] + '<br/>' +
            '下四分位数: ' + params[0].data[1] + '<br/>' +
            '中位数: ' + params[0].data[2] + '<br/>' +
            '上四分位数: ' + params[0].data[3] + '<br/>' +
            '最大值: ' + params[0].data[4]
          );
        }
      },
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? 15 : 10}%`,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 20 : 10}%`,
        right: '3%',
        bottom: '10%'
      },
      xAxis: {
        type: 'category',
        // boundaryGap: true,
        // nameGap: pxToRem(30 * props?.dialogData?.fontSizeTimes),
        splitArea: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLabel: {
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20),
          color: 'white'
        },
        data: props?.boxplotData?.xAxisData,
      },
      yAxis: {
        type: 'value',
        name: '元',
        min: 0,
        max: (value) => value.max || 10000,
        axisLine: {
          show: true
        },
        splitArea: {
          show: false
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        nameTextStyle: {
          align: 'right',
          color: "white",
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20),
        },
        nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 14 : 20),
        axisLabel: {
          fontSize: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 12 : 20),
          color: 'white'
        }
      },
      series: [
        {
          name: 11,
          type: 'boxplot',
          itemStyle: {
            color: '#BA8CF5',
            borderColor: '#BA8CF5',
          },
          boxWidth: [pxToRem(10), pxToRem(10)],
          data: props?.boxplotData?.seriesData
        }
      ]
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on("legendselectChanged", (params) => {
      event.stopPropagation();
    });
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

const disposeChart = () => { // 销毁旧图表实例
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
}

defineExpose({
  updateChart,
  disposeChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h293 {
  height: 293px;
}

.dialog-h293 {
  width: 1120px;
  height: 500px;
}
</style>